<template>
  <div class="home-contains">
    <div class="show">
      <h1>企业碳核算</h1>
      <p>平台使用了多种最新的碳核算模型，核算结果更精确、更可靠！</p>
      <button>了解更多</button>
    </div>
    <br style="border: 2px solid" />
    <div class="introduce">
      <div>
        <h3>专业碳核算</h3>
        <el-icon size="80px" color="red">
          <StarFilled />
        </el-icon>
      </div>
      <div>
        <h3>专业碳核算</h3>
        <el-icon size="80px" color="green">
          <StarFilled />
        </el-icon>
      </div>
      <div>
        <h3>专业碳核算</h3>
        <el-icon size="80px" color="yellow">
          <StarFilled />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { StarFilled } from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.home-contains {
  position: absolute;
  text-align: center;
  margin-top: 2%;
  margin-left: 11%;
}

.show {
  margin-left: 60%;
}

.introduce {
  div {
    margin: 0 55px;
  }

  margin-left: 35%;

  display: inline-flex;
}
</style>
